{% extends "base.html" %}

{% block title %}{{ title }} - 歌曲详情{% endblock %}

{% block content %}
<div class="song-detail-wrapper">
    <!-- 头部信息 -->
    <div class="song-header">
        <img class="detail-cover"
             src="{{ url_for('static', filename='covers/' + filename|replace('.mp3', '.jpg')) }}"
             alt="{{ title }}封面">

        <div class="title-group">
            <h1>{{ title }}</h1>
            <p class="artist">{{ artist }}</p>
        </div>
    </div>

    <!-- 播放器与可视化 -->
    <div class="player-section">
        <canvas id="waveform" class="visualizer-canvas"></canvas>

        <audio id="main-audio"
               src="{{ url_for('static', filename='songs/' + filename) }}"
               crossorigin="anonymous"></audio>

        <div class="controls">
            <button class="play-btn">▶</button>
            <input type="range" class="progress" value="0">
            <span class="time-display">0:00 / {{ duration }}</span>
        </div>
    </div>

    <!-- 歌词容器 -->
    <div class="lyrics-box" data-lyrics="{{ lyrics }}">
        <div class="lyrics-scroller">
            {% for line in lyrics.split('\n') %}
            <div class="lyric-line" data-time="{{ line|parse_lrc_time }}">
                {{ line|clean_lyrics }}
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<script>
    // 音频可视化核心逻辑
    class AudioVisualizer {
        constructor(canvasId, audioElement) {
            this.canvas = document.getElementById(canvasId);
            this.ctx = this.canvas.getContext('2d');
            this.audio = audioElement;
            this.analyser = new (window.AudioContext || window.webkitAudioContext)();

            this.source = this.analyser.createMediaElementSource(this.audio);
            this.analyserNode = this.analyser.createAnalyser();
            this.source.connect(this.analyserNode);
            this.analyserNode.connect(this.analyser.destination);

            this.dataArray = new Uint8Array(this.analyserNode.frequencyBinCount);
            this.draw();
        }

        draw() {
            requestAnimationFrame(() => this.draw());

            this.analyserNode.getByteFrequencyData(this.dataArray);
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

            // 波形绘制逻辑
            this.ctx.beginPath();
            this.ctx.moveTo(0, this.canvas.height/2);

            this.dataArray.forEach((value, i) => {
                const x = (i / this.dataArray.length) * this.canvas.width;
                const y = (value / 255) * this.canvas.height;
                this.ctx.lineTo(x, y);
            });

            this.ctx.strokeStyle = '#3498db';
            this.ctx.lineWidth = 2;
            this.ctx.stroke();
        }
    }

    // 初始化播放器
    document.addEventListener('DOMContentLoaded', () => {
        const audio = document.getElementById('main-audio');
        const visualizer = new AudioVisualizer('waveform', audio);

        // 播放控制
        document.querySelector('.play-btn').addEventListener('click', () => {
            audio.paused ? audio.play() : audio.pause();
        });

        // 进度条同步
        audio.addEventListener('timeupdate', () => {
            const progress = (audio.currentTime / audio.duration) * 100;
            document.querySelector('.progress').value = progress;
        });
    });
</script>
{% endblock %}
